import React, { Component } from "react";
import PropTypes from "prop-types";

import GroupHeader from "./groupHeader";
import Box from "../../components/Box/box";

// utils
import navigate from "../../utils/navigation.js";
import { get } from "../../utils/db.js";

const BoxItem = Box.Item;

export default class Attend extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { userId } = this.props;
    const {
      currentMonth = "",
      attendanceCount = 0,
      restCount = 0,
      restHoursCount = 0,
      forgetPunchCount = 0,
      workLateCount = 0,
      workLeaveEarlyCount = 0
    } = this.props.holidayInfo;
    return (
      <div
        className="growth-bonus waterMark"
        onClick={() => {
          window._rlog(`_growth_to_attend`);
          navigate({
            system: "attend",
            corpId: get("corpId"),
            userId
          });
        }}
      >
        <GroupHeader
          title={`${currentMonth}月考勤统计`}
          onClick={() => {}}
          color="orange"
          icon={
            <img
              className="growth-profile-icon"
              src="https://gw.alicdn.com/tfs/TB1jxjOdaagSKJjy0FbXXa.mVXa-80-80.png"
            />
          }
        />

        <Box cols={4}>
          {/* <BoxItem
            text={comptimeCount}
            suffix="天"
            linkText="剩余年假"
            ceiling={9999}
          />
          <BoxItem
            text={annualLeaveCount}
            suffix="天"
            linkText="加班调休"
            ceiling={9999}
          /> */}
          <BoxItem
            text={attendanceCount}
            suffix="天"
            linkText="出勤天数"
            ceiling={9999}
          />
          <BoxItem
            text={Number(restCount || restHoursCount)}
            suffix={`${Number(restHoursCount) ? "小时" : "天"}`}
            linkText="请假"
            ceiling={9999}
          />
          <BoxItem
            suffix="次"
            text={Number(workLateCount) + Number(workLeaveEarlyCount)}
            linkText="迟到早退"
            ceiling={9999}
          />
          <BoxItem
            suffix="次"
            text={forgetPunchCount}
            linkText="缺卡"
            ceiling={9999}
          />
        </Box>
      </div>
    );
  }
}

Attend.propTypes = {
  holidayInfo: PropTypes.object,
  userId: PropTypes.string
};
